<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style>

        .btn {
            background-color: #695c5c; /* Green */
            border: none;
            color: white;
            /* padding: 15px 32px; */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 10px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
        }

        html,body{
            height: 100%;
            width: 100%;
            padding:5px;
            /* margin:; */
            background-color: rgb(159, 159, 159);
        }
        p {
            /* margin-left: 20px; */
            display: inline-block;
            width: 80px;
        }

        .qd {
            width: 65px;
        }

        .big,
        .bb {
            border: solid 1px;
        }

        th,
        tr {
            border: solid 1px;
            width: 130px;
            text-align: center;

        }

        a {
            text-decoration: none;
        }


        .sm{
            border: solid 1px;
            padding-top:3px ;
        }
        ./* color_gray{
				background-color: gray;
			}
			 */





    </style>
</head>

<body>
<div class="color_gray" style="text-align: center;">
    <div><h3>借书界面</h3></div>
    <!--    <hr>-->
    <div><h4>查寻用户</h4></div>
    <div class="big color_gray ">
        <div class="sm">
            <p>身份证号:</p><input type="text" name="idCard" id="idCard">
            <input id="queDing" type="button" name="queDin" value="确定" class="qd btn">
        </div>
        <div class="sm">
            <p>用户名:</p><input class="name" name="borName" type="text">
            <p>可借数量:</p><input class="count" name="borCount" type="text">
            <p>账户余额: </p><input class="balance" name="borBalance" type="text">
        </div>
    </div>
    <div><h4>借书</h4></div>
    <div>
        <div class="bb">
            <p>请输入书名:</p>
            <input type="text" name="bname" id="bname">
            <!--            <input id="bookName" class="bookName" name="bookName" type="text">-->
            <!--            <input id="queDing" type="button" name="queDin" value="确定" class="qd">-->
            <input name="queDin" id="btns" value="确定" type="button" class="btn qd">
            <div id="returnMsg" style="display: inline"></div>
        </div>
        <br>

        <table id="table-list" class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>书籍名</th>
                <th>作者</th>
                <th>类型</th>
                <th>出版社</th>
                <th>库存</th>
                <th>借阅价格(元/周)</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="list" id="tbody-list">
            <!--            id="showBody"-->

            </tbody>

            <tbody>
            <tr>
                <td colspan="8" align="center">
                    <div class="pager">
                        <ul class="clearfix">
                            <li class="prev">上一页</li>
                            <li><input type="button" class="page" value="1"></li>
                            <li><input type="button" class="page" value="2"></li>
                            <li><input type="button" class="page" value="3"></li>
                            <li><input type="button" class="page" value="4"></li>
                            <li><input type="button" class="page" value="5"></li>
                            <li><input type="button" class="page" value="6"></li>
                            <li class="prev">下一页</li>
                        </ul>
                    </div>
                </td>

            </tr>
            </tbody>
        </table>

    </div>

</div>

</body>
<script>
    var num;
    var card;
        $("#queDing").click(function () {
            card = $("#idCard").val();
            console.log(card)
            $.get("/ajaxReturnBorInfo.bor", {"idcard": card}, function (data) {
                var jsonObj = JSON.parse(data);
                // console.log(jsonObj)
                $(".balance").val(jsonObj[0].balance)
                     num=$(".count").val(10)
                $(".name").val(jsonObj[0].userName)
                ad(1);
            })
        })
    $(".page").click(function () {
        let page = $(this).val();
        // console.log(page)
        ad(page)
    });
    $("#btns").click(function (){
        var bookName=$("#bname").val();
        // console.log(bookName)
        // console.log(card)
        $.post("/bookName-msg.admin",{"bookName":bookName,"card": card},function (text){
            // if(text==false){
            //     $("#returnMsg").css("color","red").html("请先输入借阅者身份证")
            // }else {
            // console.log(text)
                let  borObj2 = JSON.parse(text)
                // console.log(borObj2)
                bookList(borObj2)
            // }

        })

    })


    function ad(page) {
        $.get("/queryAllBookInfo.admin", {"index": page}, function (text) {
            //分页
            // console.log(text)
            let indexs = text.indexOf(",")
            let resolves = text.substring(0, indexs);
            // console.log(resolves)//总条数
            // let page = Math.ceil(Number(resolves) / 4);//生成页数
            // for(let j=1;)

            let list = text.substring(indexs + 1, text.length);

            // console.log(list)
           let   borObj = JSON.parse(list)
            bookList(borObj)

        });
    }




    function bookList(borObj){
        $("#tbody-list").empty();
        // console.log(borObj)
        for (let i = 0; i < borObj.length; i++) {
            if (borObj[i].stock > 0){
                let str = "";
                str += "<td>" + i+1 + "</td>";
                str += "<td>" + borObj[i].bookName + "</td>";
                str += "<td>" + borObj[i].typeName + "</td>";
                str += "<td>" + borObj[i].author + "</td>";
                str += "<td>" + borObj[i].press + "</td>";
                str += "<td>" + borObj[i].stock + "</td>";//库存
                str += "<td>" + borObj[i].price + "</td>";
                str += "<td>" +
                    "<input type='button' id='jieyue'  value='借阅' onclick='jieye("+borObj[i].bookId+")' >";
                let tr = $("<tr>" + str + "</tr>");
                $("#tbody-list").append(tr);

            }else {
            let str = "";
            str += "<td>" + i + "</td>";
            str += "<td>" + borObj[i].bookName + "</td>";
            str += "<td>" + borObj[i].typeName + "</td>";
            str += "<td>" + borObj[i].author + "</td>";
            str += "<td>" + borObj[i].press + "</td>";
            str += "<td>" + "已全部借出" + "</td>";//库存
            str += "<td>" + borObj[i].price + "</td>";
            str += "<td>" +
                "<input type='button' disabled  value='借阅' >";
            let tr = $("<tr>" + str + "</tr>");
            $("#tbody-list").append(tr);

            }
        }
    }

    function jieye(bookid){

        console.log(bookid)
        if(card!=null){
            $.post("/lendBook.admin", {"id": bookid, "card": card}, function (text) {
                console.log(text)
                if(text){
                    $("#returnMsg").html("借阅成功")

                    num = $(".count").val()-1
                    console.log(num)
                    $(".count").val(num)

                    if($(".count").val()==0){
                        confirm("借书已经达到上限")
                        $("#jieyue").attr("disabled")

                    }
                }else {
                    $("#returnMsg").html("借阅失败")
                }

            })
        }else {
            $("#returnMsg").html("请输入身份证号！")
        }

    }



    //根据书名查询

</script>

</html>